<template>
    <!--还款数据-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{ $t('pageTitle.repayData') }}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item prop="appName" label="">
                            <select-app-list :multiple="true" v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="userType">
                            <el-select v-model="form.userType" :multiple="true" :placeholder="$t('system.userType')" clearable style="width:100%;">
<!--                                <el-option :key="3" :value="3" :label="$t('common.all')" ></el-option>-->
                                <el-option value="新户" :label="$t('common.newUser')" ></el-option>
                                <el-option value="次新户" :label="$t('common.secNewUser')" ></el-option>
                                <el-option value="老户" :label="$t('common.oldUser')" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button @click="getTableData" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="exportExcel" type="primary">{{ $t('common.export') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" show-summary :summary-method="getSummaries"  style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column prop="date" label="到期日" width="120"></el-table-column>
                        <el-table-column prop="shouldRepayCount" label="应还笔数" min-width="120"></el-table-column>
                        <el-table-column prop="overdueCount" label="逾期笔数" min-width="120"></el-table-column>
                        <el-table-column prop="overdueRate" label="逾期占比" min-width="120"></el-table-column>
                        <el-table-column prop="payedCount" label="已还笔数" min-width="120"></el-table-column>
                        <el-table-column prop="notPayedCount" label="未还笔数" min-width="120"></el-table-column>
                        <el-table-column prop="notPayedRate" label="未还占比" min-width="120"></el-table-column>
                        <el-table-column prop="shouldRepayAmount" label="应还金额" min-width="120"><template slot-scope="{row}">{{ row.shouldRepayAmount | formatCurrency }}</template></el-table-column>
                        <el-table-column prop="payedAmount" label="已还金额" min-width="120"><template slot-scope="{row}">{{ row.payedAmount | formatCurrency }}</template></el-table-column>
                        <el-table-column prop="notPayedAmount" label="未还金额" min-width="120"><template slot-scope="{row}">{{ row.notPayedAmount | formatCurrency }}</template></el-table-column>
                        <el-table-column prop="notPayedAmountRate" label="未还金额占比" min-width="120"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="./main.js"></script>

<style lang="scss">
</style>
